<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" :border="false" :statusBar="true"
      @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">考试成绩</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">考试成绩</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <!-- 考试结果 -->
      <view class="exam-result">
        <view class="exam-result-charts">
          <view class="charts-box">
            <qiun-data-charts type="arcbar" :opts="examResultChartOpts" :chart-data="examResultChartData" />
          </view>
          <view class="exam-result-charts-title">
            <view class="title-name">2<text class="title-name-num">分</text> </view>
            <view class="sub-title-name">不合格</view>
          </view>
        </view>

        <view class="exam-result-desc">考试不达标，请继续努力！</view>
        <view class="exam-result-buttons">
          <view class="button-item">
            重新考试
          </view>
          <view class="button-item primary">
            快速提分
          </view>
        </view>
        <view class="exam-result-icon-buttons">
          <view class="icon-button-item" v-for="(item, index) in examResultIconButtons" :key="index">
            <view class="icon-button-item-num no-answer-2">14</view>
            <image class="icon-button-img" :src=item.img mode="widthFix">
            </image>
            <view class="icon-button-txt">{{ item.label }}</view>
          </view>
        </view>
      </view>
      <!-- 考试分析 -->
      <view class="exam-anelyse">
        <view class="exam-anelyse-title">
          <view class="exam-anelyse-title-name">考试分析</view>
          <view class="exam-anelyse-title-details">查看详情</view>
        </view>
        <view class="exam-anelyse-inner">
          <view class="exam-anelyse-content">
            <view class="left-list">
              <view class="list-item">
                <view class="list-item-circel"></view>累积模拟考试<text class="list-item-num">5</text>次，平均分<text
                  class="list-item-num">11</text>
              </view>
              <view class="list-item">
                <view class="list-item-circel"></view>目标知识点 <text class="list-item-num">129</text>个，未掌握<text
                  class="list-item-num error">55</text>个
              </view>
              <view class="list-item">
                <view class="list-item-circel"></view>您的弱项考点<text class="list-item-num error">65</text>个
              </view>
            </view>
            <view class="right-progress">
              <view class="right-progress-title">通过率</view>
              <view class="right-progress-sub-title">
                20<text class="right-progress-sub-title-rate">%</text>
              </view>
            </view>
          </view>
          <view class="exam-anelyse-button">去领取考前密卷</view>
        </view>
      </view>
    </scroll-view>

  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { ref, reactive, computed } from 'vue'

  import { useExamResultPageErrorImg, useExamResultPagePaperImg, useExamResultPageScoreImg, useExamResultPageUnFinishImg } from '@/pagesExam/static/images'

  // #ifdef MP
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // #endif
  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  // 题库类型
  const baseType = ref<string>()
  // 考试结果Chart配置
  const examResultChartOpts = ref({
    color: ["#f4645c"],
    padding: [0, 0, 0],
    canvasId: 'examResultCharts',
    canvas2d: true,
    inScrollView: true,
    title: {
      name: "",
      fontSize: 25,
      color: "#f4645c"
    },
    subtitle: {
      name: "",
      fontSize: 17,
      color: "#f4645c",
      background: '#fdefef'
    },
    extra: {
      arcbar: {
        type: "default",
        width: 10,
        backgroundColor: "#fdefef",
        radius: 75,
        startAngle: 1,
        endAngle: 0,
        gap: 2,
        linearType: "none"
      }
    }
  })
  // 考试结果Chart数据
  const examResultChartData = ref({
    series: [
      {
        name: "考试结果",
        color: "#f4645c",
        data: 0.75
      }
    ]
  })
  /**
   * 考试结果图标按钮对象
   */
  interface ExamResultIconButton {
    label: string,
    /**
     * un_finished:未做题，error:错误,paper:查看试卷,score:成绩单
     */
    code: string,
    img: string,
  }

  // 考试结果图标按钮
  const examResultIconButtons = ref<ExamResultIconButton[]>([
    { label: '未做题', code: 'un_finished', img: useExamResultPageUnFinishImg() },
    { label: '错题回顾', code: 'error', img: useExamResultPageErrorImg() },
    { label: '试卷回顾', code: 'paper', img: useExamResultPagePaperImg() },
    { label: '历史成绩', code: 'score', img: useExamResultPageScoreImg() },
  ])
  onLoad((options: any) => {
    baseType.value = options.baseType
  })

  onShow(() => {

  })

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  @import '@/pagesExam/static/exam-result-page-image.scss';

  .viewport {
    background-repeat: no-repeat;
    background-image: url($exam-result-page-bg-image);
    background-size: 100% auto;
    background-color: #e5f3f0;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      color: #fff;
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      color: #fff;
      font-size: 16px;
      text-align: center;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      // justify-content: center;
      height: v-bind(titleHeight);

      .title {
        margin-left: 82rpx;
        font-size: 18px;
        // font-weight: bold;
      }
    }
  }

  /* #endif */
  .scroll-view {
    padding: 0 20rpx;
  }

  // 考试结果
  .exam-result {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 2rpx;
    padding: 40rpx 45rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    .exam-result-charts {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 160px;

      .charts-box {
        position: absolute;
        height: 160px;
      }

      .exam-result-charts-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
        color: #f4645c;

        .title-name {
          font-weight: bold;
          font-size: 50rpx;

          .title-name-num {
            font-size: 25rpx;
          }
        }

        .sub-title-name {
          margin-top: 10rpx;
          padding: 4rpx 10rpx;
          font-size: 17rpx;

          background-color: #fdefef;
          border-radius: 6rpx;
        }
      }

    }

    .exam-result-desc {
      display: flex;
      justify-content: center;
      margin-top: -65px;

      font-size: 28rpx;
      color: #0f0f0f;
      font-weight: bold;
    }

    .exam-result-buttons {
      display: flex;
      justify-content: space-around;
      margin-top: 30rpx;

      .button-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 283rpx;
        height: 70rpx;
        font-size: 26rpx;
        color: #333333;
        border-radius: 35rpx;
        border: solid 2rpx #dadada;

        &.primary {
          color: #6d361b;
          font-weight: bold;
          background-image: linear-gradient(90deg,
              #f9de94 0%,
              #f7cd75 50%,
              #f7c66a 72%,
              #f6bd5b 100%),
            linear-gradient(#dadada,
              #dadada);
          border: none;
        }
      }


    }

    .exam-result-icon-buttons {
      display: flex;
      justify-content: space-around;
      margin-top: 40rpx;

      .icon-button-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;

        align-items: center;

        .icon-button-item-num {
          position: absolute;
          top: -12rpx;
          left: 50%;
          z-index: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18rpx;
          // font-weight: bold;
          color: #fff;

          &.no-answer-1 {
            width: 24rpx;
            height: 24rpx;
            background-color: #53c683;
            border-radius: 50%;
          }

          &.no-answer-2 {
            width: 34rpx;
            height: 24rpx;
            background-color: #53c683;
            border-radius: 10rpx;
          }

          &.error-2 {
            width: 34rpx;
            height: 24rpx;
            background-color: #f4645c;
            border-radius: 10rpx;
          }

          &.error-1 {
            width: 24rpx;
            height: 24rpx;
            background-color: #f4645c;
            border-radius: 50%;
          }

          &.error-2 {
            width: 34rpx;
            height: 24rpx;
            background-color: #f4645c;
            border-radius: 10rpx;
          }
        }

        .icon-button-img {
          width: 41rpx;
        }

        .icon-button-txt {
          margin-top: 10rpx;
          font-size: 22rpx;
          color: #222222;
        }
      }
    }
  }

  // 考试分析
  .exam-anelyse {
    margin-top: 25rpx;
    padding: 30rpx 20rpx;
    font-size: 28rpx;
    color: #285aea;
    background-image: linear-gradient(180deg,
        #eaf2fd 0%,
        #f3f8fe 52%,
        #e6f4ff 100%),
      linear-gradient(#f2f7fe,
        #f2f7fe);
    border-radius: 20rpx;
    border: solid 2rpx #d0d8ee;

    .exam-anelyse-title {
      display: flex;
      justify-content: space-between;

      .exam-anelyse-title-name {
        font-weight: bold;
      }

      .exam-anelyse-title-details {
        font-size: 24rpx;
      }
    }

    .exam-anelyse-inner {
      margin-top: 25rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 14rpx;
      background-color: #ffffff;

      .exam-anelyse-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .left-list {
          .list-item {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #222222;
            margin-bottom: 20rpx;

            .list-item-circel {
              margin-right: 18rpx;
              width: 14rpx;
              height: 14rpx;
              border-radius: 7rpx;
              border: solid 4rpx #285aea;
            }

            .list-item-num {
              margin: 0 2rpx;
              padding: 0 10rpx;
              color: #285aea;
              background-color: #eaecfa;
              border-radius: 10rpx;

              &.error {
                color: #ee2343;
                background-color: #feecec;
              }
            }
          }
        }

        .right-progress {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: -30rpx;
          width: 130rpx;
          height: 130rpx;
          border: solid 2rpx #d0d8ee;
          background-image: linear-gradient(180deg,
              #e5ecfc 0%,
              #fdfffc 50%);
          box-shadow: 0 0 0 4px #e5ecfc inset;
          border-radius: 50%;

          .right-progress-title {
            font-size: 20rpx;
            color: #92979b;
            font-family: 'PingFangSC-Semibold';

          }

          .right-progress-sub-title {
            margin-top: -10rpx;
            margin-left: 8rpx;
            font-size: 46rpx;
            font-weight: bold;

            .right-progress-sub-title-rate {

              font-size: 23rpx;
            }
          }
        }
      }

      .exam-anelyse-button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10rpx;
        width: 390rpx;
        height: 60rpx;
        font-size: 26rpx;
        color: #ffffff;
        background-color: #497bfe;
        border-radius: 30rpx;
      }

    }
  }

</style>
